<template>
  <div>
    <div class="filter-container">
      <div class="title-container">
        <h3 class="apimenu-title">基础用法</h3>
      </div>
      <we-search
        :query-param="queryParam"
        :search-elements="uiConfig.searchElements"
        :search-more-elements="uiConfig.searchMoreElements"
        @search="search"
      >
        <div style="float:right"><we-export
          title="导出"
          ref="weExport"
          :data="grid1Data"
          :fields="uiConfig.items"
          @onExport="onExport"
          :isDefault="true"
        /></div>
      </we-search>
      <we-grid
        ref="weGrid"
        :items="uiConfig.items"
        :operationButtons="uiConfig.operationButtons"
        :query="queryParam"
        grid-url="grid1"
        operation-width="200px"
        @change="change"
        @onBeforeSearch="beforeSearch"
      >
        <template
          slot="status"
          slot-scope="scope"
        >
          <table-status-icon
            :colorEnum="colorEnum"
            :status="scope.row.status && scope.row.status"
            :statusEnum="statusEnum"
          />
        </template>
      </we-grid>
    </div>

    <div class="filter-container">
      <div class="title-container">
        <h3 class="apimenu-title">参数类型</h3>
      </div>
      <we-grid
        ref="myGrid"
        :items="uiConfig.paramTypeColumn"
        grid-url="searchParamTypeData"
        operation-width="200px"
      >
      </we-grid>
    </div>
  </div>
</template>
<script>
// import mockData from '../../mock';
export default {
  data () {
    const paymentClassic = [
      { value: 1, name: 'qrCode' },
      { value: 2, name: 'transfer' },
      { value: 3, name: 'recharge' },
      { value: 4, name: 'cashout' },
    ];
    const paymentStatus = [
      { value: 0, name: 'fail' },
      { value: 1, name: 'success' },
      { value: 2, name: 'pre' },
      { value: 3, name: 'init' },
      { value: 4, name: 'expired' },
      { value: 5, name: 'waitForPayment' },
      { value: 6, name: 'done' },
    ];
    return {
      showDialog: false,
      localShowDialog: true,
      isShowHeader: true,
      isHiddenPagination: false,
      tableSize: ['small', 'mini', 'medium'],
      tableSizeIndex: 0,
      grid1Data: [
        {
          amount: "10000.00",
          counterName: "七星海新酒店",
          createAt: 1632797430,
          currencyId: 0,
          inOutMode: "11",
          operatorName: "JLF",
          orderId: "1209950692047876096",
          paymentClass: 3,
          paymentId: "1209950554407591936",
          phone: "+855-33221155",
          status: 1,
          subject: "柜台现金充值",
          transactionType: 0,
          userName: "KX",
        },
        {
          amount: "10000.00",
          counterName: "七星海新酒店",
          createAt: 1632797430,
          currencyId: 0,
          inOutMode: "11",
          operatorName: "JLF",
          orderId: "12099506922047876096",
          paymentClass: 3,
          paymentId: "12099505154407591936",
          phone: "+855-33221155",
          status: 1,
          subject: "柜台现金充值",
          transactionType: 0,
          userName: "KX",
        },
        {
          amount: "10000.00",
          counterName: "七星海新酒店",
          createAt: 1632797430,
          currencyId: 0,
          inOutMode: "11",
          operatorName: "JLF",
          orderId: "12099506920347876096",
          paymentClass: 3,
          paymentId: "120995055114407591936",
          phone: "+855-33221155",
          status: 1,
          subject: "柜台现金充值",
          transactionType: 0,
          userName: "KX",
        },
        {
          amount: "10000.00",
          counterName: "七星海新酒店",
          createAt: 1632797430,
          currencyId: 0,
          inOutMode: "11",
          operatorName: "JLF",
          orderId: "12091950692047876096",
          paymentClass: 3,
          paymentId: "12091950554407591936",
          phone: "+855-33221155",
          status: 1,
          subject: "柜台现金充值",
          transactionType: 0,
          userName: "KX",
        },
      ],
      expandRowKeys: [],
      queryParam: {},
      editData: {},
      statusEnum: {
        1: 'enable',
        2: 'disable',
      },
      colorEnum: {
        1: 'approved',
        2: 'rejected',
      },
      uiConfig: {
        operationButtons: [
          {
            icon: 'el-icon-edit',
            title: '编辑',
            handle: (index, row) => {
              this.$alert(`index:${ index }; \n row:${ JSON.stringify(row) }`);
            },
          },
        ],
        editElements: [
          { label: 'iPaymentId', key: 'paymentId', type: 'el-input' },
          { label: 'iTitleCode', key: 'code', type: 'el-input' },
          { label: 'iUserId', key: 'userId', type: 'el-input' },
          { label: 'iMaskPhone', key: 'maskPhone', type: 'el-input' },
          { label: 'iAmount', key: 'amount', type: 'el-input' },
          { label: 'iSubject', key: 'subject', type: 'el-input' },
          { label: 'iCaptcha', key: 'captcha', type: 'el-input' },
        ],

        searchElements: [
          { key: 'createAt', type: 'el-date-picker', range: 'datetimerange', label: '创建时间' },
          {
            key: 'paymentId',
            style: 'width:190px',
            label: '订单号',
          },
        ],
        searchMoreElements: [
          { label: '用户名', key: 'userName' },
          { label: '手机号', key: 'phone' },
        ],
        disabledKeys: {},
        edit: {},
        queryParam: {},
        items: [
          { key: 'orderId' },
          { key: 'paymentId' },
          { key: 'amount' },
          { key: 'userName' },
          { key: 'phone' },
          {
            key: 'subject',
          },
          {
            key: 'createAt',
            filter: 'time',
          },
          {
            width: '120px',
            key: 'paymentClass',
            filter: 'enums',
            enums: paymentClassic,
          },
          {
            width: '80px',
            key: 'status',
            display: 'iStatus',
            filter: 'enums',
            enums: paymentStatus,
          },
        ],
        expands: [
          { display: 'paymentId', key: 'paymentId' },
          { display: 'amount', key: 'amount' },
          { display: 'subject', key: 'subject' },
        ],
        paramTypeColumn: [
          { key: 'param', display: '参数' },
          { key: 'directions', display: '说明' },
          { key: 'type', display: '类型' },
          { key: 'optionalValue', display: '可选值' },
          { key: 'default', display: '默认值' },
        ],
      },
    };
  },
  created () { },
  methods: {
    onExport () {
      this.$refs.weExport.onExport('测试导出')
    },
    toggleExpandRowKeys () {
      if (this.expandRowKeys.length) {
        this.expandRowKeys = []
        return
      }
      this.expandRowKeys = this.$refs.myExpandsGrid.list.map(item => item.paymentId)
    },
    beforeSearch ({ queryParam }) {
      console.log(queryParam);
    },
    change () { },
    toggleShowHeader () {
      this.isShowHeader = !this.isShowHeader
    },
    toggleTableSize () {
      if (this.tableSizeIndex < this.tableSize.length - 1) {
        this.tableSizeIndex += 1
      } else {
        this.tableSizeIndex = 0
      }
    },
    search () {
      this.showDialog = false;
      this.$refs.weGrid.search();
    },
  },
};
</script>

<style>
.title-container {
  padding: 20px 0;
}
</style>
